<template>
  <div class="wrap">
    <!-- 面包屑导航 -->
    <a-breadcrumb>
      <a-breadcrumb-item>
        <!-- <router-link to="/home"> -->
        <a-icon type="home" />
        <span>主页</span>
        <!-- </router-link> -->
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <a-icon type="user" />
        <span>实习申请</span>
      </a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 标签页 -->
    <a-tabs default-active-key="1" animated v-show="true">
      <a-tab-pane key="1" tab="实习申请">
        <!-- 步骤条 -->
        <a-spin :spinning="SpinningState" tip="正在提交申请. . .">
          <div class="spin-content">
            <a-steps
              v-model="current"
              :status="status"
              type="navigation"
              @change="changeSteps"
            >
              <a-step title="实习方向" />
              <a-step title="实习小组" />
              <a-step title="完成" />
            </a-steps>
            <SXDirection v-if="current === 0"></SXDirection>
            <SXGroup v-else-if="current === 1"></SXGroup>
            <SXComplete v-else></SXComplete>
          </div>
        </a-spin>
      </a-tab-pane>
      <!-- <a-tab-pane key="2" tab="岗位列表"> Content of Tab Pane 2 </a-tab-pane> -->
    </a-tabs>
    <a-empty v-show="false">
      <span slot="description">已加入实习小组</span>
    </a-empty>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import SXDirection from "./SXDirection";
import SXComplete from "./SXComplete";
import SXGroup from "./SXGroup";
export default {
  data() {
    return {
      current: 0,
      status: "process", //error
    };
  },
  methods: {
    ...mapMutations("InternshipApply", ["resetData"]),
    //点击步骤卡回调
    changeSteps(current) {
      if (current == 0) {
        this.resetData();
        return;
      }
      if (this.SXDirectionSelectKey[0] == 0) {
        this.current = 0;
        this.status = "error";
        this.$message.warning("请选择适合的实习方向");
        return;
      } else {
        this.status = "process";
      }
      if (current == 2) {
        if (
          this.SXDirectionSelectKey[0] == 0 ||
          this.SXGroupSelectKey[0] == 0
        ) {
          this.$message.warning("请先选择适合的实习小组");
          this.current = 1;
          this.status = "error";
        } else {
          this.status = "process";
        }
      }
    },
  },
  components: {
    SXDirection,
    SXComplete,
    SXGroup,
  },
  computed: {
    ...mapState("InternshipApply", [
      "SXDirectionSelectKey",
      "SXGroupSelectKey",
      "SpinningState",
    ]),
  },
};
</script>

<style lang='less' scope>
.wrap {
  padding: 1%;
}

.ant-breadcrumb {
  .ant-breadcrumb-link {
    letter-spacing: 5px;
  }
}

.ant-tabs {
  margin-top: 20px;

  .ant-tabs-top-bar {
    .ant-tabs-tab {
      margin: 0 15px 0 0;
    }
  }

  .ant-tabs-tabpane {
    .ant-steps {
      width: 60%;
      margin-bottom: 15px;
    }
  }
}
</style>